<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>出行管理</title>
		<!--<link rel="stylesheet" type="text/css" href="css/DE/DE_commonality.css" />-->
		<link rel="stylesheet" type="text/css" href="css/DE/DE_gettingaround_declare_administration.css" />
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<header></header>
		<section>
			<div>
				<div class="center-left">
					
				</div>
				<div class="center-rigth">
					<p class="title">出行管理</p> 
					<div class="head">
						<p class="count"><span id="chu">出行统计</span></p> 
							<div id="info">
								<ul id="ti">
									<li>
										<div id="ti-box">
											<span id="tiles">
												正在研学
											</span>
											<p class="shuzi">3</p>
										</div>
									</li>
									<li>
										<div id="ti-box">
											<span id="tiles">
											当前出行人数
											</span>
											<p class="shuzi">340</p>
										</div>
									</li>
									<li>
										<div id="ti-box">
											<span id="tiles">
											异常提醒
											</span>
											<p class="shuzi">0</p>
										</div>
									</li>
								</ul>
							</div>
					</div>
					<div id="text-center">
						<p class="zhuangtai">出行状态跟踪</p>
						<div class="text-center-left">
							<div id="text-center-left-head">
								<div id="gaunjianci">
									<input type="text" value="" id="antistop" placeholder="搜索关键词"/><a href="javascrpit:(0)" class="sousuo">搜索</a>
								</div>
								<div id="xuan">
									<select id="city" name="city" onfocus="city()" onchange="district()">
										<option value ="0" selected="selected">选择城市</option>
									</select>
									<select id="district" name="district">
										<option value ="0">选择区</option>
									</select>
									<a href="javascrpit:(0)" class="chaxun">查询</a>
								</div>
								<input type="checkbox" name="chuxing" value="显示全部正在研学出行"/><span>显示全部正在研学出行</span>
							</div>	
							<div class="redias">
								<div id="redia-center">
									<label class="zuo"><input type="radio" name="chuxing" value="郑州市第九中学红旗渠研学"/><span class="sizes">郑州市第九中学红旗渠研学</span></label>
									<label class="zuo"><input type="radio" name="chuxing"/ checked="checked" value="郑州市第八中学云台山研学旅行"><span class="sizes">郑州市第八中学云台山研学旅行</span></label>
									<label class="zuo"><input type="radio" name="chuxing"  value="郑州市纬一路小学红旗渠研学旅行"/><span class="sizes">郑州市纬一路小学红旗渠研学旅行</span></label>
									<label class="zuo"><input type="radio" name="chuxing"  value="郑州市一中绿博园研学旅行"/><span class="sizes">郑州市一中绿博园研学旅行</span></label>
									<label class="zuo"><input type="radio" name="chuxing"  value="郑州市互助路小学博物院研学旅行"/><span class="sizes">郑州市互助路小学博物院研学旅行</span></label>
									<label class="zuo"><input type="radio" name="chuxing"  value="郑州市今明双语小学云台山研学旅行"/><span class="sizes">郑州市今明双语小学云台山研学旅行</span></label>
									<label class="zuo"><input type="radio" name="chuxing"  value="郑州市第九中学南湾湖研学旅行"/><span class="sizes">郑州市第九中学南湾湖研学旅行</span></label>
									<label class="zuo"><input type="radio" name="chuxing"  value="郑州市实验中学嵩山少林寺研学旅行"/><span class="sizes">郑州市实验中学嵩山少林寺研学旅行</span></label>
									<label class="zuo"><input type="radio" name="chuxing"  value="郑州市十一中郭亮村研学旅行"/><span class="sizes">郑州市十一中郭亮村研学旅行</span></label>
									<label class="zuo"><input type="radio" name="chuxing"  value="郑州市外国语五云山研学旅行"/><span class="sizes">郑州市外国语五云山研学旅行</span></label>
									<label class="zuo"><input type="radio" name="chuxing"  value="文化路一小动物园研学"/><span class="sizes">文化路一小动物园研学</span></label>
									<label class="zuo"><input type="radio" name="chuxing"  value="文化绿城小学博物馆研学"/><span class="sizes">文化绿城小学博物馆研学</span></label>
								</div>
							</div>
						</div>
						<div class="text-center-right">
							<div id="container"></div>
							<!--路线图详情-->
							<!--<div id="panel"></div>-->
						</div>
					</div> 
					<div id="text-center-foot">
						<p class="xiangqing">出行计划详情</p>
						<div id="app">
						 <template>
						  <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
						    <el-tab-pane label="学校的出行情况" name="first" >
						    	<div class="school_info">
						    		<p class="scoool_name" id="bootmean">
						    			学校名称&nbsp;&nbsp;<el-input v-model="school_name" placeholder="郑州市第八初级中学" style="width: 280px;margin-left: 15px;"></el-input>
						    			&nbsp;&nbsp;&nbsp;&nbsp;审批编号&nbsp;&nbsp;<el-input v-model="shenpi_Id" placeholder="ZZDBCJZX001" style="width: 100px;"></el-input>
						    		</p>
						    		<p id="bootmean">出行名称&nbsp;&nbsp;<el-input v-model="chuxing_name" placeholder="白云山研学旅行" style="width: 170px;margin-left: 15px;"></el-input></p>
						    		<div class="chuxing_people" id="bootmean">
							    		<p class="pele_one">
							    			出行人员&nbsp;&nbsp;
							    			<el-input v-model="class_nianji" placeholder="七年级" style="width: 80px;margin-left: 15px;"></el-input>
							    			<el-input v-model="class_banji" placeholder="1班" style="width: 80px;"></el-input>
							    			<el-input v-model="class_count" placeholder="60人" style="width: 80px;"></el-input>
							    			<el-input v-model="class_te_name" placeholder="王老师" style="width: 80px;"></el-input>
							    			<el-input v-model="class_phone" placeholder="15038277250" style="width: 120px;"></el-input>
							    		</p>
							    		<p class="peple_two">
							    			<el-input v-model="class_nianji2" placeholder="七年级" style="width: 80px;margin-left: 15px;"></el-input>
							    			<el-input v-model="class_banji2" placeholder="2班级" style="width: 80px;"></el-input>
							    			<el-input v-model="class_count2" placeholder="60人" style="width: 80px;"></el-input>
							    			<el-input v-model="class_te_name2" placeholder="王老师" style="width: 80px;"></el-input>
							    			<el-input v-model="class_phone2" placeholder="15038277250" style="width: 120px;"></el-input>
							    		</p>
						    		</div>
						    		<div class="chuxing_time" id="bootmean">
						    			<p class="chu_Time">
						    				出行日期&nbsp;&nbsp;
							    			 <el-date-picker
										      v-model="start_end"
										      type="daterange"
										      start-placeholder="开始日期"
										      end-placeholder="结束日期"
										      :default-time="['00:00:00', '23:59:59']"
										      style="width: 270px;margin-left: 15px;">
										    </el-date-picker>
							    		</p>
							    		<p class="s_e_Time">
							    			<template>
											  <el-time-select
											    placeholder="起始时间"
											    v-model="startTime"
											    :picker-options="{
											      start: '06:00',
											      step: '00:15',
											      end: '23:30'
											    }"
											    style="width: 130px;margin-left: 10px;">
											  </el-time-select>
											  <el-time-select
											    placeholder="结束时间"
											    v-model="endTime"
											    :picker-options="{
											      start: '06:00',
											      step: '00:15',
											      end: '23:30',
											      minTime: startTime
											    }"
											   style="width: 130px;margin-left: 10px;">
											  </el-time-select>
											</template>
							    		</p>
							    	</div>
							    	<p id="bootmean">
						    			出行目的地&nbsp;&nbsp;
						    			<span class="mudi">目的地1</span>
						    			<el-input v-model="diming" placeholder="河南" style="width: 80px;margin-right: 10px;"></el-input>
						    			<template>
										  <el-select v-model="mudidi" placeholder="请选择" style="width: 120px;margin-right: 10px;">
										    <el-option
										      v-for="item in options"
										      :key="item.value"
										      :label="item.label"
										      :value="item.value">
										    </el-option>
										  </el-select>
										</template>
										<el-input v-model="jidi" placeholder="白云山研究学基地" style="width: 150px;"></el-input>
						    		</p>
						    		<p id="bootmean">
						    			带队老师&nbsp;&nbsp;
						    			<el-input v-model="te_name" placeholder="邢亚峰" style="width: 80px;margin-left: 15px;"></el-input>
						    			<el-input v-model="te_sex" placeholder="男" style="width:50px;"></el-input>
						    			<el-input v-model="te_zhiwu" placeholder="年级班主任" style="width:100px;"></el-input>
						    			<el-input v-model="te_phone" placeholder="15038277250" style="width: 120px;"></el-input>
						    		</p>
						    		<p id="bootmean">
						    			车辆安排&nbsp;&nbsp;
						    			<span class="car_chu">出行车辆1</span>
						    			<el-input v-model="car_teacher" placeholder="邢老师" style="width: 80px;"></el-input>
						    			<el-input v-model="car_teacher_phone" placeholder="15038277250" style="width: 120px;"></el-input>
						    			<el-input v-model="car_teacher_zhiwu" placeholder="豫A9FP67" style="width: 80px;"></el-input>
						    			<el-input v-model="car_address" placeholder="ZZBZ001" style="width: 100px;"></el-input>
						    		</p>
						    		<p id="bootmean">
						    			<div>出行介绍&nbsp;&nbsp;</div>
						    			<div class="chuxing_info" style="margin-left: 70px;">
						    				<el-input
												  type="textarea"
												  :rows="5"
												  placeholder="请输入内容"
												  v-model="chuxing_info"
												  style="width: 500px;">
												</el-input>
						    			</div>
							    	</p>
						    	</div>
						    </el-tab-pane>
						    <el-tab-pane label="出行目的地" name="second">
						    	<div>
						    		<a href="javascript:(0)" class="infoshow">详情介绍...</a>
						    		<ul>
						    			<li class="first">
						    				<div class="name">
						    					<span>基地名称:</span>
						    					<span>云台山研学旅行基地</span>
						    				</div>
						    				<div class="type">
						    					<span>特色标签:</span>
						    					<span>自然生态</span>
						    				</div>
						    			</li>
						    			<li class="first">
						    				<div class="name">
						    					<span>所属级别:</span>
						    					<span>省级</span>
						    				</div>
						    				<div class="type">
						    					<span>适用学段:</span>
						    					<span>小学 初中 高中</span>
						    				</div>
						    			</li>
						    			<li class="first">
						    				<div class="name">
						    					<span>预定联系人:</span>
						    					<span>张璐</span>
						    				</div>
						    				<div class="type">
						    					<span>预定联系人联系方式:</span>
						    					<span>15038277250</span>
						    				</div>
						    			</li>
						    			<li class="first">
						    				<div class="name">
						    					<span>已接待研学团体:</span>
						    					<span>28个</span>
						    				</div>
						    				<div class="type">
						    					<span>累计接待研学人数:</span>
						    					<span>45738人</span>
						    				</div>
						    			</li>
						    			<li class="first">
						    				<div class="name">
						    					<span>
						    						<span id="tuanti">
						    							近期接待研学团体:
						    							<div id="chuxing">
							    							<p class="school">郑州市第八中学		<span class="people">120人</span>	已出行</p>
								    						<p class="school">郑州市第九中学		<span class="people">452人</span>	未出行</p>
								    						<p class="school">郑州市胜利路小学	<span class="people">264人</span>	未出行</p>
							    						</div>
						    						</span>
						    					</span>
						    				</div>
						    			</li>
						    		</ul>
						    	</div>
						    </el-tab-pane>
						    <el-tab-pane label="在途休息" name="third">
						    	<div id="sleep">
						    		<div class="info_list">
						    			<p class="car_info">
							    			<span id="car_Id">
							    				<el-checkbox v-model="checked">
							    				车牌号
							    				</el-checkbox>
							    				豫A9FP67
							    			</span>
							    			<span id="dingweiqi">
							    				定位器编号：ZZBA001
							    			</span>
							    			<span><el-button icon="el-icon-location-outline">郑州市侯寨收费站</el-button></span>
							    		</p>
							    		<p class="gen-teacher">
							    			<span id="car_techer">
							    				跟车老师:<span class="teacher_name">邢老师</span>
							    			</span>
							    			<span id="techer_phone">
							    				联系方式：15038277250
							    			</span>
							    			<span class="student_info">
							    				<el-link :underline="false" icon="el-icon-s-custom">点击查看学生名单</el-link>
							    			</span>
							    		</p>
						    		</div>
						    		<div class="info_list">
						    			<p class="car_info">
							    			<span id="car_Id">
							    				<el-checkbox v-model="checked">
								    				车牌号
								    			</el-checkbox>
							    				豫A7N984
							    			</span>
							    			<span id="dingweiqi">
							    				定位器编号：ZZBA002
							    			</span>
							    			<span><el-button icon="el-icon-location-outline">郑州市侯寨收费站</el-button></span>
							    		</p>
							    		<p class="gen-teacher">
							    			<span id="car_techer">
							    				跟车老师:<span class="teacher_name">王老师</span>
							    			</span>
							    			<span id="techer_phone">
							    				联系方式：15038277250
							    			</span>
							    			<span class="student_info">
							    				<el-link :underline="false" icon="el-icon-s-custom">点击查看学生名单</el-link>
							    			</span>
							    		</p>
						    		</div>
						    		<div class="info_list">
						    			<p class="car_info">
							    			<span id="car_Id">
							    				<el-checkbox v-model="checked">
								    				车牌号
								    			</el-checkbox>
							    				豫A7B950
							    			</span>
							    			<span id="dingweiqi">
							    				定位器编号：ZZBA003
							    			</span>
							    			<span><el-button icon="el-icon-location-outline" size="max">郑州市侯寨收费站</el-button></span>
							    		</p>
							    		<p class="gen-teacher">
							    			<span id="car_techer">
							    				跟车老师:<span class="teacher_name">王老师</span>
							    			</span>
							    			<span id="techer_phone">
							    				联系方式：15038277250
							    			</span>
							    			<span class="student_info">
							    				<el-link :underline="false" icon="el-icon-s-custom">点击查看学生名单</el-link>
							    			</span>
							    		</p>
						    		</div>
						    	</div>
						    </el-tab-pane>
						    <el-tab-pane label="团队信息" name="fourth">
						    	<div class="infos">
						    		<div class="info_left">
							    		<p class="stuet">
							    			<span id="classs">
							    				<el-checkbox v-model="checked">
							    				班组
							    				</el-checkbox>
							    				<input type="text" id="clas" placeholder="年级"/>
							    				<input type="text" id="clas" placeholder="班级"/>
							    				<input type="text" id="clas" placeholder="人数"/>
							    			</span>
							    		</p>
							    		<p  class="teacher">
							    			<input type="text" id="clas" placeholder="管理老师"/>
						    				<input type="text" id="clas" placeholder="联系方式"/>
						    				<input type="text" id="clas" placeholder="定位器编号"/>
							    		</p>
							    		<p  class="student_inf">
							    			<span>
							    				<el-link :underline="false" icon="el-icon-s-custom">点击查看学生名单</el-link>
							    			</span>
							    		</p>
							    		<p class="info_time">
							    			<span id="kaoqin_time">
							    				考勤时间
							    			</span>
							    			<span id="date">
							    				<el-date-picker
											      v-model="riqi"
											      type="date"
											      placeholder="选择日期"
											      style="width: 120px;">
											    </el-date-picker>
							    			</span>
										    <span id="minute">
										    	<el-time-select
												  v-model="time"
												  :picker-options="{
												   start: '00:00',
												    step: '00:15',
												    end: '23:59'
												  }"
												  placeholder="选择时间"
												  style="width: 120px;">
												</el-time-select>
										    </span>
							    		</p>
							    		<p class="info_size">
							    			<input type="text" id="kaoqin" placeholder="考勤情况：总人数60人,未考勤2人"/>
							    		</p>
							    	</div>
							    	<div class="info_right">
							    		<div id="myPageTop">
						               	 	<input id="T_tipinput" placeholder="请输入关键字"/>
										</div>
								    	<div id="maps"></div>
							    	</div>
							    	</div>
						    </el-tab-pane>
						    <el-tab-pane label="学生信息" name="fiveth">
								<div class="stu_info">
									<div class="stu_info_left">
										<el-input
										    placeholder="王梓新"
										    v-model="name"
										   	style="width: 180px;">
										    <i slot="suffix" class="el-input__icon el-icon-search"></i>
										  </el-input>
										  <p class="stu_name">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：王梓新</p>
										  <p class="stu_sex">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：男</p>
										  <p class="stu_school">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;校：郑州市第八中学</p>
										  <p class="stu_class">班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：8年级25班</p>
										  <p class="stu_teacher">带队老师：邢老师&nbsp;&nbsp;<span>15038277250</span></p>
										  <p class="stu_facilityId">设备编号：ZZDBZX287&nbsp;&nbsp;&nbsp;&nbsp;<el-button icon="el-icon-location-outline" >点击获取位置</el-button></p>
										  <p class="stu_address">实时位置：焦作市云台山景区</p>
										  <p class="stu_infoTime">
										  	考勤情况：
										  	<ul class="infoTime_ul">
										  		<li class="infoTime_li">2019-10-26&nbsp;&nbsp;9:00&nbsp;&nbsp;识别</li>
										  		<li class="infoTime_li">2019-10-26&nbsp;&nbsp;12:00&nbsp;&nbsp;未识别</li>
										  	</ul>
										  </p>
										  <p class="stu_weilan">电子围栏：未发生触发电子围栏情况</p>
										  <p class="stu_xingwei">行为识别：未发生行为识别安全报警未发生行为识别安全报警未发生行为识别安全报警</p>
									</div>
									<div class="stu_info_right">
										<input id="s_tipinput" placeholder="请输入关键字"/>
										<div id="stu_info"></div>
									</div>
								</div>
							</el-tab-pane>
						  </el-tabs>
						</template>
					  </div>
					</div>
				</div>
			</div>
		</section>
		<footer></footer>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/DE/DE_gettingaround_declare_administration.js" type="text/javascript" charset="utf-8"></script>
		<!--地图路线图-->
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
	    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=903a28585001da28fdbbd5d5890c059f&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Driving"></script>
	    <!--element-ui.js-->
	    <script src="js/vue.js"></script>
		<script src="js/element-ui.js"></script>
		<script type="text/javascript">
			new Vue({
			  el: '#app',
			  data: function() {
			     return {
			       	activeName: 'second',
			       	checkList: ['选中且禁用','复选框 A'],
			       	checked:'',
			        riqi: '',
			        time:'',
			        name:'',
			        school_name:'',//这个是学校出行所需要的值
			        shenpi_Id:'',
			        chuxing_name:'',
			        class_nianji:'',
			        class_banji:'',
			        class_count:'',
			        class_te_name:'',
			        class_phone:'',
			        class_nianji2:'',
			        class_banji2:'',
			        class_count2:'',
			        class_te_name2:'',
			        class_phone2:'',
			        start_end:'',
			        startTime: '',
       				endTime: '',
       				diming:'',
       				options: [{
			          value: '选项1',
			          label: '郑州市'
			        }, {
			          value: '选项2',
			          label: '焦作市'
			        }, {
			          value: '选项3',
			          label: '开封市'
			        }, {
			          value: '选项4',
			          label: '洛阳市'
			        }, {
			          value: '选项5',
			          label: '新乡市'
			        }],
			        mudidi: '',
			        jidi:'',
			        te_name:'',
			        te_sex:'',
			        te_zhiwu:'',
			        te_phone:'',
			        car_teacher:'',
			        car_teacher_phone:'',
			        car_teacher_zhiwu:'',
			        car_address:'',
			        chuxing_info:''
			      }
			  },
			    methods: {
			      handleClick(tab, event) {
			        console.log(tab, event);
			      }
			    }
			})
			//市区
			var proList=["郑州","开封","新乡","鹤壁"];
			var allCityList=[
					["管城区","中原区","二七区","上街区","惠济区","金水区"],
					["龙亭区","顺河回族区","鼓楼区","禹王台区","祥符区"],
					["卫滨区","红旗区","牧野区","凤泉区"],
					["淇滨区","山城区","鹤山区"]
				]
			function city(){
				var pro=document.getElementById("city");
				pro.length=proList.length+1;
				for(var i=1;i<pro.length;i++){
					pro[i].innerHTML=proList[i-1];
					pro[i].value=i;
				}
			}
			
			function district(){
				var city=document.getElementById("district");
				var pro=document.getElementById("city");
				city.value=0;
				var cityList=allCityList[pro.value-1];
				city.length=cityList.length+1;
				for(var i=1;i<city.length;i++){
					city[i].innerText=cityList[i-1];
					city[i].value=i;
				}
			}
		    //基本地图加载
		    var map = new AMap.Map("container", {
		        resizeEnable: true,
		        center: [116.397428, 39.90923],//地图中心点
		        zoom: 13 //地图显示的缩放级别
		    });
		    //构造路线导航类
		    var driving = new AMap.Driving({
		        map: map,
		//		panel:panel  //这个是具体详情
		    }); 
	    	var placeSearch = new AMap.Driving({
				city: $("#placecity").val()
			})
	    	//单选按钮获取的value值
//	    	alert($('input:radio:checked').val())
		    // 根据起终点名称规划驾车导航路线
		    driving.search([
		        {keyword: '中原区启福尚都',city:'郑州'},
		        {keyword:'博物院' }
		    ], function(status, result) {
		        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
		        if (status === 'complete') {
		            log.success('绘制驾车路线完成')
		        } else {
		            log.error('获取驾车数据失败：' + result)
		        }
		    });
		    
		   //团队信息的地图
		   	 var t_map = new AMap.Map("maps", {
		        resizeEnable: true,
		        zoom: 13,
		        center: [116.43, 39.92],
		        viewMode: '3D',
		        pinch: 45
		    });
		    //输入提示
		    var T_autoOptions = {
		        input: "T_tipinput"
		    };
		    var T_auto = new AMap.Autocomplete(T_autoOptions);
		    var T_placeSearch = new AMap.PlaceSearch({
		        map: t_map
		    });  //构造地点查询类
		    AMap.event.addListener(T_auto, "select", Tselect);//注册监听，当选中某条记录时会触发
		    function Tselect(e) {
		        T_placeSearch.setCity(e.poi.adcode);
		        T_placeSearch.search(e.poi.name);  //关键字查询查询
		    }
		    
		      //学生的地图
		    var s_map = new AMap.Map("stu_info", {
		        resizeEnable: true,
		        zoom: 13,
		        center: [116.43, 39.92],
		        viewMode: '3D',
		        pinch: 45
		    });
		     var s_autoOptions = {
		        input: "s_tipinput"
		    };
		    var s_auto = new AMap.Autocomplete(s_autoOptions);
		    var s_placeSearch = new AMap.PlaceSearch({
		        map: s_map
		    });  //构造地点查询类
		    AMap.event.addListener(s_auto, "select", select);//注册监听，当选中某条记录时会触发
		    function select(e) {
		        s_placeSearch.setCity(e.poi.adcode);
		        s_placeSearch.search(e.poi.name);  //关键字查询查询
		    }
		</script>
	</body>
</html>
